<script setup lang="ts">
import {assetsInfoReq} from "@/api/asset";
import StackProgress from "@/views/asset-general/component/StackProgress.vue";
import {reactive, ref} from "vue";
import type {VxeGridInstance, VxeGridProps} from "vxe-table";
interface Result{
    value:Number,
    color:String,
    num:Number
}
const xGrid = ref<VxeGridInstance>();
const gridOptions = reactive<VxeGridProps>({
    border:true,
    showHeaderOverflow:true,//当表头内容过长时显示为省略号
    showOverflow:true,//当内容过长时显示为省略号
    keepSource:true,
    id:'full_edit_1',
    height:600,
    rowConfig:{
        keyField:'id',
        isHover:true
    },
    columnConfig:{
        resizable:true//启用列宽调整
    },
    customConfig:{
        storage:true,
        // checkMethod({ column }){
        //     return !['nickname', 'role'].includes(column.field);
        // }
    },
    sortConfig:{
        trigger:'cell',
        remote:true
    },
    filterConfig:{
        remote:true
    },
    pagerConfig:{
        pageSize:10,
        pageSizes:[5,10,15,20,50]
    },
    formConfig:{
        titleWidth:100,
        titleAlign:'right',
        items:[
            {
                field:'ip',
                title:'IP地址',
                span:12,
                itemRender:{name:'$input',props:{placeholder:'请输入查询的IP'}}
            }
        ]
    },
    toolbarConfig:{
        refresh:true
    },
    proxyConfig:{
        seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
        sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
        filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
        form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
        // 对应响应结果 { result: [], page: { total: 100 } }
        props: {
            result: 'result', // 配置响应结果列表字段
            total: 'page.total' // 配置响应结果总页数字段
        },
        ajax:{
            query:async ({page,sorts,filters,form})=>{
                const queryParams = Object.assign({},form)
                const firstSort = sorts[0]
                if (firstSort){
                    queryParams.sort = firstSort.field//排序字段
                    queryParams.order = firstSort.order//排序顺序
                }
                filters.forEach(({field,values})=>{
                    queryParams[field] = values.join(',')
                })
                // console.log(queryParams)
                const response = await assetsInfoReq({'currentPage':page.currentPage,'pageSize':page.pageSize,
                    'ip':queryParams.ip})
                // eslint-disable-next-line no-return-await
                const result = response.data.assetList.map((item)=>{
                    let critical = item.vulnerabilities.reduce((pre,cur)=>{
                        return cur.risk_level==='CRITICAL'?pre+1:pre;
                    },0)
                    let high = item.vulnerabilities.reduce((pre,cur)=>{
                        return cur.risk_level==='HIGH'?pre+1:pre;
                    },0)
                    let medium = item.vulnerabilities.reduce((pre,cur)=>{
                        return cur.risk_level==='MEDIUM'?pre+1:pre;
                    },0)
                    const sum = critical+high+medium;
                    const cNum = critical;
                    const hNum = high;
                    const mNum = medium;
                    if (sum!=0) {
                        critical = critical * 100 / sum;
                        high = high * 100 / sum;
                        medium = 100 - critical - high;
                    }

                    const vulnerability:Result[] = [];
                    if (critical!=0)
                        vulnerability.push({'value': critical,'color':'#8B0000','num':cNum})
                    if (high!=0)
                        vulnerability.push({'value':high,'color':'#FF0000','num':hNum})
                    if (medium!=0)
                        vulnerability.push({'value':medium,'color':'#FFA500','num':mNum})
                    if (critical==0&&high==0&&medium==0)
                        vulnerability.push({'value':100,'color':'#008080',num:0})
                    return Object.assign({},{'id':item.id,'ip':item.ip,'vulnerability':vulnerability,
                    'web':item.web_infos.length,'firewall':item.firewall_policies.length,'service':item.services.length})
                })
                Object.assign(response.data,{'result':result})
                return response.data
            }
        }
    },
    columns:[
        {
            type:'seq',
            title:'序号',
            width:'5%',
            align:'center'
        },
        {
            field:'id',
            title:'ID',
            width:'8%',
            align:'center'
        },
        {
            field:'ip',
            title:"IP地址",
            width:'12%',
            align:'center'
        },
        {
            field:'vulnerability',
            title:'漏洞比例',
            width:'30%',
            align:'center',
            slots:{
                default:'progress'
            }
        },
        {
            field:'web',
            title:"部署网页数量",
            width:'8%',
            align:'center'
        },
        {
            field:'firewall',
            title:'防火墙策略数量',
            width:'8%',
            align:'center'
        },
        {
            field:'service',
            title:'部署服务数量',
            width:'8%',
            align:'center'
        },
        {
            align:'center',
            slots:{
                default:'button'
            }
        }
    ]
})
const clickDetail = (data)=>{
    routerPush('AssetDetail',{id:data.id,ip:data.ip})
}
</script>

<template>
  <vxe-grid ref="xGrid" v-bind="gridOptions">
      <template #progress="{row}">
          <StackProgress :progress-list="row.vulnerability"/>
      </template>
      <template #button="{row}">
          <el-button type="primary" @click="clickDetail(row)">查看详情</el-button>
      </template>
  </vxe-grid>
</template>

<style scoped>
</style>